<template>
	<view class="content">
		<view v-if="cardlist.length>0">
			<view class="top">
				<swiper class="imageContainer" @change="handleChange" next-margin="139rpx" circular>
					<block v-for="(item,index) in cardlist" :key="index">
						<swiper-item class="swiperitem">
							<view class="itemcontent" :style="'background-image:url('+ item.charge_image+'); background-size: 100% 100%;'">
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="dots">
					<view class="item" :class="[swiperCurrent==index?'item_color':'']" v-for="(item,index) in cardlist" :key="index"></view>
				</view>
				<view class="title">会员权益</view>
			</view>
			<view class="cont">
				<view v-if="cardlist[swiperCurrent]" v-html="cardlist[swiperCurrent].change_text"></view>
			</view>
			<view class="bottom">
				<view @click="gotosubject" class="btn">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardlist: [],
				swiperCurrent: 0,
				Childinfo:uni.getStorageSync('currentChild')
			};
		},
		onLoad() {
			var grade= this.Childinfo.grade;
			var stu_id = this.Childinfo.student_id;
			var education = grade>9?12:(9>=grade&&grade>6?9:6);
			var data={
				education:education,
				stu_id:stu_id
			};
			this.$mapi.apiPost('api/v1/mobile/member/card/infos', data).then(res => {
				var data = res.data;
				if (data.code == 200) {
					this.cardlist = data.data;
					if (this.cardlist.length == 0) {
						uni.showToast({
							title: "暂无会员卡",
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
				}
			});
		},
		methods: {
			handleChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			gotosubject: function() {
				console.log("===");
				uni.navigateTo({
					url: 'subject?data=' + encodeURIComponent(JSON.stringify(this.cardlist[this.swiperCurrent]))
				})
			}
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
	}

	.top {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		left: 0;
		width: 100%;
		height: 466upx;
		z-index: 1;
		background-color: #FFFFFF;
	}

	.index_color {
		color: #FCE9B6 !important;
	}

	// 3D轮播样式
	.imageContainer {
		width: 100%;
		height: 325upx;
		margin-top: 30upx;
		background-color: #fff;
	}

	.swiperitem {
		/* height: 500rpx; */
		height: 318upx;
		padding-left: 30upx;
		box-sizing: border-box;
		position: relative;

	}

	.itemcontent {
		width: 100%;
		height: 318upx;
		border-radius: 20upx;

		.cardname {
			padding: 20upx;
			margin-left: 10upx;
			font-size: 34upx;
			color: #4A4034;
		}

		.money {
			position: relative;
			top: 110upx;
			left: 30upx;
			font-size: 30upx;

			text {
				font-size: 50upx;
			}
		}
	}

	.dots {
		margin: auto;
		width: 92%;
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.item {
			width: 38upx;
			height: 6upx;
			background: rgba(229, 229, 229, 1);
			margin-left: 20upx;
		}

		.item_color {
			background: #FF9900;
		}
	}

	.cont {
		padding: 490upx 0 200upx;
	}

	.title {
		width: 92%;
		margin: auto;
		font-size: 34upx;
		color: #4A4034;
	}

	.scroll_view {
		width: 100%;
		height: calc(100% - 580upx);
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn {
		margin: 30upx auto;
		width: 92%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		font-size: 30upx;
		border-radius: 8upx;
		background: #FF9900;
	}
</style>
